<template>
  <div class="app-container">
  	<header class="app-header">
    	<span class="title">{{$route.meta.title}}</span>
    </header>

    <el-form ref="pwdForm" :inline="false" :model="password" class="query-form" style="padding:40px 0 20px" :rules="pwdRules">
      <el-form-item label="所属角色" label-width="100px" class="query-form-item">
      	<el-input :value="rolename | rolesFilter( rolesList,username)" disabled style=" width:300px;"></el-input>          
      </el-form-item>
      <el-form-item label="用户名称"  label-width="100px" class="query-form-item">
        <el-input v-model="username" disabled style=" width:300px;"></el-input>
      </el-form-item>
      <el-form-item label="旧密码"  prop="old_password" label-width="100px" class="query-form-item">
        <el-input type="password" v-model="password.old_password" placeholder="请输入旧密码" style=" width:300px;"></el-input>
      </el-form-item>
      <el-form-item label="新密码"  prop="new_password" label-width="100px" class="query-form-item">
        <el-input type="password"  v-model="password.new_password" placeholder="请输入新密码" style=" width:300px;"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="check_password" label-width="100px" class="query-form-item">
        <el-input type="password"  v-model="password.check_password" placeholder="请再次输入新密码" style=" width:300px;"></el-input>
      </el-form-item>
      <el-form-item label-width="100px" class="query-form-item">
        <el-button  type="primary" icon="el-icon-edit-outline"  @click.native="handlePwdForm()">保存</el-button>  
      </el-form-item>
    </el-form>	       
        	
 
   
  </div>
</template>

<script>
import config from '@/api/bgapi'
import request from '@/utils/request'
import { validUsername } from '@/utils/validate'
export default {
  data() {
		let validateNumLetter = (rule, value, callback) => {
      if (!validUsername(value)) {
          callback(new Error("请输入6-18位数字及小写字母"));
      } else {
          callback();
      }
    }; 
		let validatePass2 = (rule, value, callback) => {
				if (value === "") {
						callback(new Error("请再次输入密码"));
				} else if (value !== this.password.new_password) {
						callback(new Error("两次输入密码不一致!"));
				} else {
						callback();
				}
		};       
    return {
			rolename:'',
      username:this.$store.getters.name,
			filePathUrl:'',
			rolesList:[],
			password:{
				old_password:'',
				new_password:'',
				check_password:''
      },
      pwdRules: {
          old_password: [
            { required: true, message: "请输入密码", trigger: "blur" },
            { validator: validateNumLetter, trigger: "blur" }
          ],        
          new_password: [
            { required: true, message: "请输入密码", trigger: "blur" },
            { validator: validateNumLetter, trigger: "blur" }
          ],
          check_password: [
            {required: true,message: "请再次输入密码",trigger: "blur"},
            {validator: validatePass2, trigger: "blur"}
          ]
      },


    }
  },
  mounted(){
		this.getRolesList();
  },
  methods: {
    async getRolesList(){
      var res = await request.get(config.adminRoles);
      var _list = res.data;
      this.rolesList = _list || [];
			this.getUserInfo();
    },		
		async getUserInfo(){
			var _id = this.$store.getters.id;
			var res = await request.get(config.adminList,{params:{id:_id}});
			this.rolename = res.data[0].roles;
		},
		handlePwdForm(){
      this.$refs["pwdForm"].validate(async valid => {
        if(valid){
					var _id = this.$store.getters.id;
					var res = await request.put(config.adminList+'/'+_id,this.password);
					if(res.code == '20000'){
						this.$message.success("修改密码成功，请重新登录!");  
						await this.$store.dispatch('user/logout')
						this.$router.push('/login')               
					}
        }
      })
		},
    handleClick(tab, event) {
			
    },
		onSelect(filePath, filePathUrl) {
				//this.filePath = filePath;
				this.filePathUrl = filePathUrl;
		}
  },
  filters: {
    rolesFilter(roleArr,rolesList,username){
			if(username == 'admin'){
				return '超级管理员拥有所有权限';
			}else{
				if(rolesList && rolesList.length > 0){
					var roleStr = '';
					roleArr.forEach(item => {
						let _role = rolesList.find(role=>role.id == item);
						if(_role){
							roleStr += _role.roleName+'/';
						}
					});
					return roleStr.substr(0,roleStr.length-1);
				}else{
					return '--';
				}
			}
    }
  }
}
</script>